<template>
    <div class="container">
        <table align="center">
        <tr align="center">
            <td>新鲜水果 | 盒装草莓 柠檬</td>
            <td></td>
            <td></td>
            <td></td>
            <td>查看更多></td>
        </tr>
        <tr align="center">
            <td rowspan="3">
                <el-image
                style="width: 130px; height: 200px"
                :src="url"></el-image>
            </td>
            <td>草莓 500g</td>
            <td>葡萄</td>
            <td>奇异果</td>
            <td>柠檬</td>
        </tr>
        <tr align="center">
            <td>
                <el-image
                style="width: 100px; height: 100px"
                :src="url2"></el-image>
            </td>
            <td>
                <el-image
                style="width: 100px; height: 100px"
                :src="url3"></el-image>
            </td>
            <td>
                <el-image
                style="width: 100px; height: 100px"
                :src="url4"></el-image>
            </td>
            <td>
                <el-image
                style="width: 100px; height: 100px"
                :src="url5"></el-image>
            </td>
        </tr>
        <tr align="center">
            <td>
                ￥10.00
            </td>
            <td>￥20.00</td>
            <td>￥12.12</td>
            <td>￥32.00</td>
        </tr>
    </table>
    </div>
</template>

<script>
export default {
    name: 'ShuiGuo',
    data() {
        return {
            shu:[],
            url: '',
            url2: '',
            url3: '',
            url4: '',
            url5: '',
        };
    },
    props: {},

    components: {},

    created() {
        this.getCarousel()
    },

    mounted() {},

    methods: {
        getCarousel(){
        this.$axios.get('/shui/')
        .then(res => {
            console.log(res)
            this.shu = res.data.data
            this.url = this.shu[0].imgs
            this.url2 = this.shu[1].imgs
            this.url3 = this.shu[2].imgs
            this.url4 = this.shu[3].imgs
            this.url5 = this.shu[4].imgs


        }).catch(err => {
            console.log(err)
        })
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
.container{
    margin: 0% auto;
}
</style>
